<template>
  <div v-loading="loading" element-loading-text="牙冠正在生成中..." class="cloud_ai">
    <div v-if="cloudAICon == 'form'" class="form-box">
      <el-form class="form" ref="formRef" label-width="100" :size="optionButtonSize">
        <el-form-item label="上颌数据">
          <el-upload
            ref="upperRef"
            class="upload-upper"
            action=""
            :limit="1"
            :on-change="upperChange"
            :on-remove="upperRemove"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="下颌数据">
          <el-upload
            ref="lowerRef"
            class="upload-lower"
            action=""
            :limit="1"
            :on-change="lowerChange"
            :on-remove="lowerRemove"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="牙号">
          <el-input-number
            v-model="toothNo"
            controls-position="right"
            :min="1"
            :max="32"
            label="请输入牙号"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :disabled="!upperData || !lowerData"
            :size="optionButtonSize"
            @click="submitUpload"
            >提交</el-button
          >
          <el-button plain :size="optionButtonSize" @click="resetClick">{{
            $t('partner.hezuo3')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <iframe
      ref="iframePage"
      v-if="cloudAICon == '3D'"
      id="fullScreen"
      class="fullScreen"
      :src="iframeSrc"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uuid: null,
      toothNo: 15,
      aiCrownInfo: null,
      cloudAICon: 'form',
      iframeSrc: '',
      upperData: null,
      lowerData: null,
      loading: false,
      fileListArr: [
        {
          typeName: '上颌',
          show: true,
        },
        {
          typeName: '下颌',
          show: true,
        },
      ],
    };
  },
  mounted() {},
  methods: {
    resetClick() {
      this.upperData = null;
      this.lowerData = null;
      this.toothNo = 1;
      this.$refs.upperRef.clearFiles();
      this.$refs.lowerRef.clearFiles();
    },
    submitUpload2() {
      this.showModel();
    },
    submitUpload() {
      const formData = new FormData();
      formData.append('upper', this.upperData);
      formData.append('lower', this.lowerData);
      this.loading = true;
      this.$http
        .post('/huchaochao/mesh/upload', formData)
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.uuid = res.data;
            this.createAiCrown();
          }
        })
        .catch((err) => {
          console.log('err', err);
          this.loading = false;
        });
    },
    createAiCrown() {
      const param = {
        uuid: this.uuid,
        toothNo: this.toothNo,
      };
      this.$http
        .get('/huchaochao/mesh/aiCrown', {
          params: param,
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.aiCrownInfo = res.data[0];
            this.showModel();
          }
        })
        .catch((err) => {
          console.log('err', err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    showModel() {
      this.cloudAICon = '3D';
      this.iframeSrc = `${this.$config.ip}/#/cloudAI3D`;
      this.$nextTick(() => {
        this.$refs.iframePage.addEventListener('load', () => {
          this.$refs.iframePage.contentWindow.postMessage(
            {
              type: 'FROM_UPLOADER',
              data: {
                ...this.aiCrownInfo,
                uuid: this.uuid,
                upperData: this.upperData,
                lowerData: this.lowerData,
              },
            },
            '*',
          );
        });
      });
    },
    upperChange({ raw }) {
      this.upperData = raw;
    },
    upperRemove(file) {
      this.upperData = null;
    },
    lowerChange({ raw }) {
      this.lowerData = raw;
    },
    lowerRemove(file) {
      this.lowerData = null;
    },
  },
};
</script>

<style lang="scss">
.cloud_ai {
  .form-box {
    width: 100%;
    height: 100vh;
    padding: 10px;
  }
  .model-box {
    margin-top: 20px;
    .model_btn {
      width: 200px;
      .model_switch_item {
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  .fullScreen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 8;
    border: none;
  }
}
</style>
